<template>
  <el-dialog
    v-if="value"
    :title="title"
    :visible.sync="value"
    :append-to-body="appendToBody"
    top="5vh"
    :width="width"
    :lock-scroll="lockScroll"
    :custom-class="className"
    :before-close="handleClose"
    :close-on-click-modal="false"
    class="skst-dialog-wraper"
  >
    <div class="dia-green">
      <slot name="green"></slot>
    </div>
    <div style="padding: 20px">
      <slot></slot>
    </div>

    <slot slot="footer" name="footer"></slot>
  </el-dialog>
</template>
<script>
export default {
  props: {
    value: { type: Boolean, default: false },
    appendToBody: { type: Boolean, default: true },
    title: { type: String, default: "" },
    width: { type: String, default: "" },
    lockScroll: { type: Boolean, default: true },
    beforeClose: { type: Function, default: () => {} },
  },
  computed: {
    className() {
      return "skst-dialog skst-dialog-" + this.position;
    },
  },
  methods: {
    handleClose() {
      if (typeof this.beforeClose === "function") {
        this.beforeClose(this.hide);
      } else {
        this.hide();
      }
    },
    hide() {
      this.$emit("close", this.value);
    },
  },
};
</script>
